<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link href="../../static/easyui/images/favicon1.ico" rel="icon" type="image/x-icon"/>
    <link href="../../static/easyui/images/favicon1.ico" rel="shortcut icon" type="image/x-icon"/>
    <title>OA办公自动化系统</title>
    <link rel="stylesheet" href="../../static/easyui/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/easyui/css/login.css">
    <title>Title</title>
    <style>

        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }

        /*
                .btn {
                    display: inline-block;
                    box-sizing: border-box;
                    border: 1px solid #cccccc;
                    border-radius: 2px;
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    color: #666;
                    cursor: pointer;
                    background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
                } */

        .btn:hover {
            background: #3c83a5;
            color: #fff;
        }

        #captcha {
            width: 300px;
            display: inline-block;
        }

        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        #wait {
            text-align: left;
            color: #666;
            margin: 0;
        }

        .thisimg:HOVER {
            cursor: pointer;
        }

        .test:FOCUS {
            border-color: #66afe9 !important;
        }

        .modal-dialog {
            width: 500px;
        }

        .modal-body .icon {
            height: 80px;
            width: 80px;
            margin: 20px auto;
            border-radius: 50%;
            color: #aad6aa;
            border: 3px solid #d9ead9;
            text-align: center;
            font-size: 44px;
        }

        .modal-body .icon .glyphicon {
            top: 11px;
        }

        .modal-p {
            margin: 20px auto;
        }

        .modal-body .modal-p h2 {
            text-align: center;
        }

        .modal-body .modal-p p {
            text-align: center;
            color: #666;
            font-size: 16px;
            padding-top: 8px;
            font-weight: 300;
        }

        .modal-p .btn {
            width: 100px;
            height: 40px;
        }

        .modal-error .icon {
            color: #f27474;
            border: 3px solid #f27474;
        }
    </style>
</head>

<body>
<div class="cotn_principal">
    <div class="cont_centrar" style="top:5%;">
        <div class="cont_login">
            <div class="cont_forms cont_forms_active_login" style="height: 480px;width: 400px;border-radius: 15px;">
                <div class="cont_img_back_"><img src="../../static/easyui/images/timg.jpeg" alt="背景图片"/></div>
                <form action="" method="post">
                    <div class="cont_form_login" style="display: block;opacity: 1;width: 400px;">
                        <div class="alert alert-danger alert-dismissible" role="alert"
                             style="position: absolute;padding: 11px;display: none">
                            错误信息: <span class="error-mess"></span>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"
                                    style="right:0px;"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <h2>登录</h2>
                        <input type="text" placeholder="用户名/手机号" autofocus="autofocus" value="" name="accountName"
                               id="accountName" class="userName test"/>
                        <input type="password" placeholder="请输入密码" value="" name="password" id="password"
                               class="password test"/>
                        <input type="text" placeholder="请输入验证码" style="margin-bottom: 20px;width:152px" name="code"
                               id="code" class="code test"/>
                        <div class="login-img" style="display:inline-block">
                            <img class="thisimg" src="/account/captcha" alt="验证码"
                                 style="width: 100px;height: 42px;border-radius: 3px;">
                        </div>
                        <br>
                        <button class="btn_login btn" type="button" >登录</button>

                    </div>
                </form>
            </div>
            <div style="border: 1px solid transparent;">
                <p style="margin-top: 550px;font-weight: 400;color: #757575;font-size: 22px;letter-spacing:1px ;">
                    欢迎使用OA办公自动化系统</p>
            </div>
        </div>

    </div>
</div>
</body>
<script type="text/javascript" src="../../static/easyui/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../static/easyui/bootstrap/js/bootstrap.min.js"></script>

<%--<script type="text/javascript">--%>
<%--$(function(){--%>
<%--$('#mymodal').modal('show');--%>
<%--})--%>
<%--</script>--%>

<%--<script>--%>
<%--$(function(){--%>
<%--console.log("fdsfdsfsfasdf");--%>
<%--$('.error-mess').text('${errormess}');--%>
<%--$('.alert-danger').css('display','block');--%>
<%--})--%>
<%--</script>--%>

<%--<script type="text/javascript">--%>
<%--$('.test').on('click',function(){--%>
<%--$(this).css('border',"1px solid transparent");--%>
<%--})--%>
<%--$('.contiue').on('click',function(){--%>
<%--location.href="/handlehas";--%>
<%--})--%>


<%--function check() {--%>
<%--var userName=$('.userName').val().trim();--%>
<%--var password=$('.password').val().trim();--%>
<%--var code=$('.code').val().trim();--%>
<%--console.log(userName);--%>
<%--console.log(password);--%>
<%--console.log(code);--%>
<%--var count=1;--%>
<%--if(userName==null || userName==""){--%>
<%--$('.error-mess').text("登录账号不能为空!");--%>
<%--$('.alert-danger').css('display','block');--%>
<%--$('.userName').css('border-color',"#a94442");--%>
<%--count=0;--%>
<%--return false;--%>
<%--}--%>
<%--if(password==null || password==""){--%>
<%--$('.error-mess').text("登录密码不能为空!");--%>
<%--$('.alert-danger').css('display','block');--%>
<%--$('.password').css('border-color',"#a94442");--%>
<%--count=0;--%>
<%--return false;--%>
<%--}--%>
<%--if(code==null || code==""){--%>
<%--$('.error-mess').text("验证码不能为空!");--%>
<%--$('.alert-danger').css('display','block');--%>
<%--$('.code').css('border-color',"#a94442");--%>
<%--count=0;--%>
<%--return false;--%>
<%--}--%>
<%--console.log(count);--%>
<%--return true;--%>
<%--}--%>

<%--</script>--%>
<script>
    $(document).ready(function () {
        $(document).on("click", ".thisimg", function () {
            changeImg();
            $.ajax({
                async: true,
                type: "GET",
                url: "${pageContext.request.contextPath}/account/getCode",
                dataType: "text",
                success: function (result) {
                    console.log(result);
                },
                error: function () {
                    alert("异步请求失败！");
                }
            })
        });
        $("#accountName").blur(function () {
            var accountName = $('#accountName').val().trim();
            if (accountName == null || accountName == "") {
                $('.error-mess').text("登录账号不能为空!");
                $('.alert-danger').css('display', 'block');
                $('#accountName').css('border-color', "#a94442");

            } else if (accountName != null || accountName != "") {
                if (accountName.length == 11) {
                    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!myreg.test(accountName)) {
                        $('.error-mess').text("请输入正确的手机号码");
                        $('.alert-danger').css('display', 'block');
                        $('#accountName').css('border-color', "#a94442");

                    }else {
                        $('.alert-danger').css('display', 'none');
                        $('#accountName').css('border-color', "#66afe9");

                    }
                }else {
                    $('.alert-danger').css('display', 'none');
                    $('#accountName').css('border-color', "#66afe9");

                }
            }
        })
        $("#password").blur(function () {
            var password = $('#password').val().trim();
            if (password == null || password == "") {
                $('.error-mess').text("密码不能为空!");
                $('.alert-danger').css('display', 'block');
                $('#password').css('border-color', "#a94442");

            } else if (password != null || password != "") {
                $('.alert-danger').css('display', 'none');
                $('#password').css('border-color', "#66afe9");

            }
        })
        $("#code").blur(function () {
            var code = $('#code').val().trim();
            if (code == null || code == "") {
                $('.error-mess').text("验证码不能为空!");
                $('.alert-danger').css('display', 'block');
                $('#code').css('border-color', "#a94442");
            } else if (code != null || code != "") {
                code = code.toLowerCase();
                $.ajax({
                    async: true,
                    type: "GET",
                    url: "${pageContext.request.contextPath}/account/getCode",
                    dataType: "text",
                    success: function (result) {
                        var re = result.toString();
                        console.log(re);
                        if (re == code) {
                            $('.alert-danger').css('display', 'none');
                            $('#code').css('border-color', "#66afe9");
                        } else {
                            $('.error-mess').text("验证码不匹配!");
                            $('.alert-danger').css('display', 'block');
                            $('#code').css('border-color', "#a94442");
                        }
                    },
                    error: function () {
                        alert("异步请求失败！");
                    }
                })
            }
        })


            $(document).on("click", ".btn_login", function () {
                var accountName = $('#accountName').val().trim();
                var password = $('#password').val().trim();
                var code = $('#code').val().trim();

                $.ajax({
                    type:"POST",
                    url:"/account/login",
                    data:{
                        accountName:accountName,
                        password:password,
                        code:code
                    },
                    dataType:"json",
                    success:function (result) {
                        if (result==0){
                            location.href="/admin/index/index.jsp"
                        }else if (result==1||result==2){
                            alert("账号密码或验证码输入有误，请重新登录");
                            location.href="/admin/login/login.jsp";
                        }
                    },
                    error:function () {
                        alert("登录失败,请重新登录！")
                        location.href="/admin/login/login.jsp";
                    }
                })

                //     if($('#remember').is(':checked')){
                //         localStorage.setItem(accountName,accountPwd);
                //     }else{
                //         localStorage.removeItem('accountName');
                //         localStorage.removeItem('accountPwd');
                //     }
                // })
                //
                // $("#accountName").blur(function () {
                //     if (localStorage.getItem('accountName') == $(this).val()){
                //         $("#password").val(localStorage.getItem('accountPwd'));
                //         $("#remember").prop("checked",true);
                //     }else{
                //         $("#password").val('');
                //     }
                // })
            });
    })

    function changeImg() {
        var imgSrc = $(".thisimg");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", chgUrl(src));
    }

    // 时间戳
    // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        url = url.substring(0, 20);
        if ((url.indexOf("&") >= 0)) {
            url = url + "×tamp=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }

    // function check() {
    // var userName=$('.userName').val().trim();
    // var password=$('.password').val().trim();
    // var code=$('.code').val().trim();
    // console.log(userName);
    // console.log(password);
    // console.log(code);
    // var count=1;
    // if(userName==null || userName==""){
    // $('.error-mess').text("登录账号不能为空!");
    // $('.alert-danger').css('display','block');
    // $('.userName').css('border-color',"#a94442");
    // count=0;
    // return false;
    // }
    // if(password==null || password==""){
    // $('.error-mess').text("登录密码不能为空!");
    // $('.alert-danger').css('display','block');
    // $('.password').css('border-color',"#a94442");
    // count=0;
    // return false;
    // }
    // if(code==null || code==""){
    // $('.error-mess').text("验证码不能为空!");
    // $('.alert-danger').css('display','block');
    // $('.code').css('border-color',"#a94442");
    // count=0;
    // return false;
    // }
    // console.log(count);
    // return true;
    // }
</script>
</html>
